<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2024-12-25 11:00:50
 * @LastEditTime: 2025-01-16 10:12:34
 * @FilePath: /low-code-platform/src/views/MaterialsView/index.vue
-->
<template>
    <div>
        <HeaderComp />
        <h1 class="font-weight-100 text-center m0 p0">组件市场</h1>
        <div class="container mc flex">
            <nav class="category mc">
                <Router-link class="category-item" to="/select-group">
                    <el-icon>
                        <CircleCheck />
                    </el-icon>
                    <div>选择</div>
                </Router-link>
                <Router-link class="category-item" to="/input-group">
                    <el-icon>
                        <EditPen />
                    </el-icon>
                    <div>文本输入</div>
                </Router-link>
                <Router-link class="category-item" to="/advanced-group">
                    <el-icon>
                        <Files />
                    </el-icon>
                    <div>高级题型</div></Router-link
                >
                <Router-link class="category-item" to="/note-group">
                    <el-icon>
                        <ChatLineSquare />
                    </el-icon>
                    <div>备注说明</div></Router-link
                >
                <Router-link class="category-item" to="/personal-info-group">
                    <el-icon>
                        <User />
                    </el-icon>
                    <div>个人信息</div></Router-link
                >
                <Router-link class="category-item" to="/contact-group">
                    <el-icon>
                        <Message />
                    </el-icon>
                    <div>联系方式</div></Router-link
                >
            </nav>
            <!-- 路由出口 -->
            <div class="coms">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderComp from '@/components/Common/Header.vue';
import {
    CircleCheck,
    Files,
    EditPen,
    ChatLineSquare,
    User,
    Message,
} from '@element-plus/icons-vue';
</script>

<style scoped lang="scss">
.container {
    width: 1180px;
    height: 600px;
}
.coms {
    // width: calc(1180px - 60px);
    flex: 1;
    height: 100%;
}
.category {
    width: 70px;
    height: 100%;
    > .category-item {
        width: 70px;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        text-align: center;
        text-decoration: none;
        font-size: var(--font-size-base);
        color: var(--white);
        border-top-left-radius: var(--border-radius-lg);
        border-bottom-left-radius: var(--border-radius-lg);
    }
    // $bg-colors: --primary-color, --success-color, --warning-color, --error-color;
    // @each $index, $item in $bg-colors {
    //     .category-item:nth-child(1) {
    //         background-color: var($item);
    //     }
    // }
    @for $i from 1 through 4 {
        .category-item:nth-child(4n + #{$i}) {
            @if $i == 1 {
                background-color: var(--primary-color);
            } @else if $i == 2 {
                background-color: var(--success-color);
            } @else if $i == 3 {
                background-color: var(--warning-color);
            } @else if $i == 4 {
                background-color: var(--error-color);
            }
        }
    }
}
</style>
